<template>
  <div>
    <h1 style="margin:10px  0">
      <el-row>
        <el-col :span="19">
          <span>查看活动</span>
          
        </el-col>
        <el-col :span="5" style="text-align:right">
          <i class="el-icon-error" style="background:#e6e6e6" @click="goBack"></i>
        </el-col>
      </el-row>
    </h1>
    <div>
      
     <el-form  label-width="80px"  ref="formAling" :model="formLabelAlign">
       <el-form-item label="活动名:" >
          <el-input v-model="formLabelAlign.name" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker v-model="formLabelAlign.begin_time" disabled type="date"  format="yyyy 年 MM 月 dd 日" value-format="timestamp" placeholder="选择日期"></el-date-picker> 至
          <el-date-picker v-model="formLabelAlign.end_time" disabled type="date" format="yyyy 年 MM 月 dd 日" value-format="timestamp" placeholder="选择日期"></el-date-picker>
        </el-form-item>

         <el-form-item label="地点:" prop="odress">
          <el-input  v-model="formLabelAlign.positaion" disabled style="width:80%"></el-input>
        </el-form-item>

        <el-form-item >
          <div style="width:60%;text-align:center">活动材料</div>
        </el-form-item>
        
        <el-form-item label="相关链接:">
          <el-input  v-model="formLabelAlign.link_url" disabled style="width:80%"></el-input>
        </el-form-item>

        <el-form-item label="活动内容">
          <el-input  type="textarea" :rows="3" disabled v-model="formLabelAlign.content" style="width:80%"></el-input>
        </el-form-item>
       <el-form-item label="附件" prop="title">
          <!-- <el-upload
            :action="action"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemoveLogo"
            :on-success="handleOkLogo"
            :data="postData"
            :show-file-list="false"
            >
             <el-button size="small" type="primary">点击上传</el-button>
             <div style="margin-top:-10px" slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="formLabelAlign.file_url" alt="">
          </el-dialog> -->
          <ul class="el-upload-list el-upload-list--text">
            <li :tabindex="index" class="el-upload-list__item is-success" v-for="(item,index) in formLabelAlign.file_url" :key="index">
              <a class="el-upload-list__item-name" :href="item"  target="_blank">
                <i class="el-icon-document"></i>{{imgStr(item)}}
                </a>
                <label class="el-upload-list__item-status-label">
                  <i class="el-icon-upload-success el-icon-circle-check"></i>
                </label>
                <i class="el-icon-close" @click="deletFun(item)"></i>
            </li>
          </ul>
        </el-form-item>
        <!-- <el-form-item >
          <el-row style="width:60%">
            <el-col :span="12"><el-button type="warning"  @click="submitArticle(1)">保 存</el-button></el-col>
            <el-col :span="12"><el-button type="primary" @click="submitArticle(0)">提交审核</el-button></el-col>
          </el-row>
        </el-form-item> -->
      </el-form>
    </div>
   
  </div>
</template>

<script>
import Http from '@/Http/Http'
export default {
  props:['editData'],
  data () {
    return {
      postData:{
        token:'',
        key:'fily',
      },
      dialogVisible: false,
      options:'',
      tokenimgUrl:'', //存储域名
      formLabelAlign:{
        file_url: [],
        name:'',
        link_url:'',
        positaion:'',
        content:'',
        begin_time:'',
        end_time:''
      },
      
      fileList:[],
      
    }
    
  },

  computed: {
  },
  mounted () {
    
  },
  created() {
    this.getToken()
    if (this.editData) {
     this.formLabelAlign.name = this.editData.name;
     this.formLabelAlign.begin_time = this.editData.begin_time;
     this.formLabelAlign.end_time = this.editData.end_time;
     this.formLabelAlign.positaion = this.editData.positaion;
     this.formLabelAlign.link_url = this.editData.link_url;
     this.formLabelAlign.content = this.editData.content;
     this.formLabelAlign.file_url = this.editData.files
    }
  },
  methods:{
    getToken() {
      Http.QiniuToken({})
      .then( res => {
        this.postData.token = res.data.data.uptoken;
        this.tokenimgUrl = res.data.data.domain
      })
      .catch( error => {
        this.$router.push('/')
        
      })
    },
    
    handleRemoveLogo(file, fileList) {
      
    },
    beforeAvatarUpload(file) {
       const isLt2M = file.size / 1024 / 1024 < 1;
       if(!isLt2M) {
         this.$message.error('上传的文件大小不能大于1MB!');
         return
       }
      this.postData.key = file.name
    },
    handleOkLogo(responed) {
      this.formLabelAlign.file_url.push(`http://${this.tokenimgUrl}/${responed.key}`)
    },
   
    submitArticle(val) {
      const param = {
        "is_draft":val,
        "name":this.formLabelAlign.name,  //活动标题
        "begin_time":this.formLabelAlign.begin_time,  //开始时间
        "end_time":this.formLabelAlign.end_time,  //介绍时间 
        "positaion":this.formLabelAlign.positaion, // 位置  
        "link_url":this.formLabelAlign.link_url, //链接
        "content":this.formLabelAlign.content, //内容
        "files":this.formLabelAlign.file_url
      }
      this.editData ? this.editFun(param,val) : this.addFun(param,val);
      
    },
    deletFun(row){
    },
    addFun(obj,val){
       Http.addActivityInsert(obj)
      .then( res => {
        if ( res.data.code == 200) {
         if(val==0){
           this.$message.success('提交成功，请耐心等候审核状态')
          }else if (val ==1 ){
            this.$message.success('保存成功')
          }
          this.goBack()
        } else {
            this.$message.error('操作失败')
        }
      })
    },
    imgStr(val) {
      const index = val.split('http://pdi2rfi8n.bkt.clouddn.com/');
      return index[1]
    },
    editFun(obj,val) {
      obj.id = this.editData.id,
      Http.editActivity(obj)
      .then( res => {
        if ( res.data.code == 200) {
          if(val==0){
           this.$message.success('提交成功，请耐心等候审核状态')
          }else if (val ==1 ){
            this.$message.success('保存成功')
          }

          this.goBack()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    goBack(){
      this.formLabelAlign.name = "";
      this.formLabelAlign.begin_time = "";
      this.formLabelAlign.end_time = "";
      this.formLabelAlign.positaion = "";
      this.formLabelAlign.link_url = "";
      this.$emit('getlist');
    },
  }
}
</script>
<style scoped>
.el-main{
  border:1px solid red !important;
}

</style>
